<script setup>
import { ref, defineProps } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import mergeCustomer from './components/mergeCustomer.vue'
import scoreModel from './components/scoreModel.vue'
import addEventsModel from './components/addEventsModel.vue'
import editScoreModel from './components/editScoreModel.vue'
import customerTabDetails from './components/customerTabDetails.vue'
import addFollowModel from './components/addFollowModel.vue'
import personTag from './components/personTag.vue'
import labels from '@/components/app/label.vue'
import {reqClientInfo,clientaddtag} from '@/api'
const isShow = ref(false)
const emits = defineEmits(['changeDrawer'])
const drawerSize = ref('70%')
const fullScreen = () => {
	if (drawerSize.value === '100%') {
		drawerSize.value = '70%'
	} else {
		drawerSize.value = '100%'
	}
}
const tabActiveKey = ref(1)
const customerTabList = ref([
	{
		id: 1,
		name: '客户概况'
	},
	{
		id: 2,
		name: '客户动态'
	},
	// {
	// 	id: 3,
	// 	name: '聊天记录'
	// },
	{
		id: 4,
		name: '所在群聊'
	},
	// {
	// 	id: 5,
	// 	name: '小鹅通'
	// },
	// {
	// 	id: 6,
	// 	name: '商机',
	// 	total: 0
	// },
	// {
	// 	id: 7,
	// 	name: '订单',
	// 	total: 0
	// }
])
const staffActiveKey = ref(0)
//合并客户弹窗
const mergeVisible = ref(false)
const changeMergeVisible = (visible) => {
	mergeVisible.value = visible
}
//评分弹窗
const scoreVisible = ref(false)
const changeScoreVisible = (visible) => {
	scoreVisible.value = visible
}
//添加事件弹窗
const eventsVisible = ref(false)
const changeEventsVisible = (visible) => {
	eventsVisible.value = visible
}
//修改积分
const integralVisible = ref(false)
const changeIntegral = (visible) => {
	integralVisible.value = visible
}
//添加跟进
const followVisible = ref(false)
const changeFollowVisible = (visible) => {
	followVisible.value = visible
}
//个人标签
const personTagVisible = ref(false)
const changePersonTagVisible = (visible) => {
	personTagVisible.value = visible
}
//选择标签
const TestRef = ref()
const labeldataapi = (val) => {
	console.log(val,'sdfsdfds')
	

	
		clientaddtag({ids:[form.value.id],tags:val.id}).then(res=>{
			ElMessage({
				message: '添加成功',
				type: 'success',
			})
			getData()
		})
}
const labelapi = () => {
	// console.log('111')
	// tableselect.value=true
	var data = {
    show:true,
    type:2,
	title:'打标签',
	tips:'将给满足条件的客户批量打标签，请选择标签',
	tipsshow:true,
  }
	TestRef.value.tableshow(data)
}

const operation = {
	score: changeScoreVisible,
	addEvents: changeEventsVisible,
	editIntegral: changeIntegral,
	addFollow: changeFollowVisible
}
//处理更多操作
const handleCommand = (type) => {
	operation[type](true)
}
const handleClick = (pane, ev) => {
	
	if (pane == -1) {
		return false
	}
}
const tabRef = ref(null)
const handleClick1 = (pane, ev) => {
	console.log('asdasdasd',form.value.external_userid);
	switch(pane){
		case 1:
			setTimeout(() => {
				tabRef.value.show(1,form.value)
			}, 10);
			break;
			case 2:
			setTimeout(() => {
				tabRef.value.show(2,form.value.external_userid)
			}, 0);
			break;
			case 4:
				console.log(pane)
			setTimeout(() => {
				tabRef.value.show(4,form.value.external_userid)
			}, 0);
			break;
		
	}
	
}
const closeDrawer = () => {
  isShow.value = false
	emits('diaUpdate')
}
const form = ref({})
const idval = ref('')
const show = async(id)=>{
	console.log('dasfdsf')
	idval.value = id
	getData()
}
const getData = async()=>{
	tabActiveKey.value = 1
	const r = await reqClientInfo({id:idval.value})
	if (r){
		form.value = r.data
		isShow.value = true
		
		setTimeout(()=>{
			tabRef.value.show(1,form.value)
		},5)
		
	}
}
defineExpose({
	show
})
</script>
<template>
	<div class="drawer">
		<el-drawer :size="drawerSize" v-model="isShow" :with-header="false" @close="closeDrawer">
			<div class="draw-container">
				<el-scrollbar max-height="100vh">
					<div class="draw-header">
						<div class="title">客户详情</div>
						<div class="icon-group">
							<el-tooltip effect="dark" placement="bottom">
								<template #content>
									<p class="box-item">{{ drawerSize === '70%' ? '全屏模式' : '退出全屏' }}</p>
								</template>
								<MyIcon
									@click="fullScreen"
									v-if="drawerSize === '70%'"
									class="icon-item"
									style="font-size: 12px"
									name="Fullscreen"
								/>
								<MyIcon @click="fullScreen" v-else class="icon-item" name="fullscreenExit" />
							</el-tooltip>

							<el-icon @click="closeDrawer" class="icon-item"><Close /></el-icon>
						</div>
					</div>
					<div class="draw-main">
						<div class="customer-overview">
							<el-tabs :before-leave="handleClick" v-model="staffActiveKey">
								<el-tab-pane class="title-pane" style="cursor: auto" :name="-1">
									<template #label>
										<span class="custom-tabs-label" style="margin-left: 24px;"> 已添加{{form.size}}个员工 </span>
										<el-divider
											style="width: 2px; height: 17px; position: absolute; right: 0px; top: 14px;margin-right: 0px;"
											class="line"
											direction="vertical"
										/> </template
								></el-tab-pane>
								<el-tab-pane :label="form.name" :name="0">
									<div class="user-info-wrap">
										<div class="user-info-content">
											<img :src="form.avatar" class="user-avatar" alt="" />
											<div class="user-info">
												<div class="title">
													<span class="name">{{ form.name }}</span>
													<span class="source"> @微信 </span>
												</div>
												<div class="name-overflow">昵称：{{ form.remark }}</div>
												<div class="score">
													客户评分: <span style="margin-right: 10px">{{form.integral}}</span> 客户积分: <span>{{form.score}}</span>
												</div>
											</div>
										</div>
										<!-- <div class="user-info-operation">
											<el-button class="user-btn select" @click="changeMergeVisible(true)" plain>合并客户</el-button>
											<el-tooltip class="box-item" effect="light" placement="top-start">
												<template #content>
													<p style="max-width: 220px">员工账号未在外呼功能使用范围内，请添加后使用</p>
												</template>
												<el-button class="user-btn no-select" plain>拨打电话</el-button></el-tooltip
											>
											<el-dropdown @command="handleCommand" trigger="click">
												<el-button style="margin-left: 10px" class="user-btn select" plain>更多操作</el-button>
												<template #dropdown>
													<el-dropdown-menu>
														<el-dropdown-item command="score">修改评分</el-dropdown-item>
														<el-dropdown-item command="addEvents"> 添加事件 </el-dropdown-item>
														<el-dropdown-item command="editIntegral">修改积分</el-dropdown-item>
														<el-dropdown-item command="addFollow">添加跟进</el-dropdown-item>
													</el-dropdown-menu>
												</template>
											</el-dropdown>
										</div> -->
									</div>
								</el-tab-pane>
							</el-tabs>
						</div>
						<div class="corp-tag-list">
							<div class="tag-item">
								<span style="margin-right: 14px; white-space: nowrap; line-height: 36px">企业标签 : </span>
								<div>
								<div v-for="(item,index) in form.tags" :key="index">
									<div class="tag-box">
									<span class="name" style="margin-bottom: 0">{{item.group.group_name}}:</span>

									
									<span v-for="(tag,idx) in item.tag" :key="idx">
									<el-popover v-if="item.deleted==0"

											popper-style="padding: 10px;min-width:0px"
											placement="right"
											:width="100"
											trigger="hover"
										>
											<div>已删除</div>
											<template #reference>
												<el-tag
									style="
										margin-left: 8px;
										background-color: #efefef;
										color: #595959;
										padding: 0 11px;
										border-color: #d1e7ff;
										border-radius: 2px;
									"
									effect="plain"
								>
									{{ tag.tag_name }}
								</el-tag>
											</template>
										</el-popover>
									
									<el-tag v-else
										style="
											margin-left: 8px;
											background-color: #f6fbfe;
											color: #595959;
											padding: 0 11px;
											border-color: #d1e7ff;
											border-radius: 2px;
										"
										effect="plain"
									>
										{{ tag.tag_name }}
									</el-tag>

								</span>
								</div>
							</div>
						</div>
								<div class="edit-btn" @click="labelapi">
									<el-icon style="margin-right: 3px"><EditPen /></el-icon>
									编辑
								</div>
							</div>
							<!-- <div class="tag-item">
								<span style="margin-right: 14px; white-space: nowrap; line-height: 36px">个人标签：</span>

								<div class="edit-btn" @click="changePersonTagVisible(true)">
									<el-icon style="margin-right: 3px"><EditPen /></el-icon>
									编辑
								</div>
							</div> -->
						</div>
						<!-- <div class="customer-corp-panel">
							<div class="corp-name-wrap">
								<div class="corp-name">
									<el-icon class="build-icon"><OfficeBuilding /></el-icon>
									无关联企业
								</div>
								<div class="clickable">暂无关联企业，请选择企业&gt;</div>
							</div>
						</div> -->
						<div class="customer-detail-content">
							<el-tabs :before-leave="handleClick1" v-model="tabActiveKey" style="padding-left: 4px;">
								<el-tab-pane  v-for="item in customerTabList" :name="item.id" :key="item.id">
									<template #label>
										<span v-if="item.total === 0"> {{ item.name }}({{ item.total }})</span>
										<span v-else> {{ item.name }}</span>
									</template>
									<!-- <customerTabDetails ref="tabRef" :tabActiveKey="tabActiveKey" /> -->
								</el-tab-pane>
							</el-tabs>
						</div>
						<customerTabDetails ref="tabRef"  />
					</div>
				</el-scrollbar>
			</div>
		</el-drawer>
		<mergeCustomer :form="form" :mergeVisible="mergeVisible" @changeMergeVisible="changeMergeVisible" />
		<scoreModel :scoreVisible="scoreVisible" @changeScoreVisible="changeScoreVisible" />
		<addEventsModel :eventsVisible="eventsVisible" @changeEventsVisible="changeEventsVisible" />
		<editScoreModel :integralVisible="integralVisible" @changeIntegral="changeIntegral" />
		<addFollowModel :followVisible="followVisible" @changeFollowVisible="changeFollowVisible" />
		<personTag :personTagVisible="personTagVisible" @changePersonTagVisible="changePersonTagVisible" />
		<labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-tabs__header){
	margin-left:24px !important;
}
:deep(.user-btn) {
	width: 92px;
	height: 36px;
	border-radius: 2px;
}

:deep(.el-table thead) {
	color: #000000a6;
	font-size: 13px;
	font-weight: normal;
}

.no-select {
	color: #8bc7ff;
	border: 1px solid #8bc7ff;
	cursor: auto;
}
.select {
	color: #1890ff;
	border: 1px solid #1890ff;
}
.select:hover {
	background-color: #f6fbff;
}
.user-avatar {
	width: 64px;
	height: 64px;
	margin-right: 12px;
}
:deep(.el-card) {
	border: 0;
	border-radius: 0;
}
:deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
	cursor: auto;
}
.title-pane {
	position: relative;
	.line {
		position: absolute;
		top: 0;
		right: 0;
	}
}

.text {
	font-size: 14px;
	color: #000000a6;
}
.flex-center {
	display: flex;
	align-items: center;
}
:deep(.el-drawer) {
	--el-drawer-padding-primary: 0px;
}
.box-item {
	font-size: 14px;
}
.user-info-wrap {
	position: relative;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	align-items: flex-start;
	padding: 12px 24px 16px;
	border-bottom: 1px dashed #f2f2f2;
	.user-info-content {
		display: flex;
	}
	.user-info-operation {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.user-info {
		.title {
			display: flex;
			align-items: baseline;
			.name {
				max-width: 140px;
				font-size: 16px;
				color: rgba(0, 0, 0, 0.85);
				font-weight: 700;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: break-all;
			}
			.source {
				color: #5fc75d;
				font-size: 13px;
			}
		}
		.name-overflow {
			max-width: 300px;
			overflow: hidden;
			white-space: nowrap;
			word-break: keep-all;
			text-overflow: ellipsis;
			font-size: 14px;
			color: #909090;
		}
		.score {
			white-space: nowrap;
			color: rgba(0, 0, 0, 0.44);
			font-size: 13px;
			display: -webkit-box;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			span {
				color: #1890ff;
				font-size: 16px;
				font-weight: 700;
				margin-left: 4px;
			}
		}
	}
}
.draw-container {
	position: relative;
	width: 100%;
	min-height: 100vh;

	background-color: #f4f5f7;
	.draw-main {
		padding: 16px;
		.card-header {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.45);
		}
		.customer-overview {
			background-color: #fff;
			.custom-tabs-label {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
			}
		}
		.corp-tag-list {
			padding: 16px 24px;
			background-color: #fff;
			span {
				color: rgba(0, 0, 0, 0.45);
				font-size: 13px;
			}
			.tag-item {
				display: flex;
				.edit-btn {
					display: flex;
					align-items: center;
					min-width: 48px;
					height: 36px;
					line-height: 36px;
					margin-left: 6px;
					font-size: 14px;
					color: #1890ff;
					user-select: none;
					cursor: pointer;
				}
				.tag-box {
					display: inline-block;
					font-size: 0;
					min-height: 36px;
					padding: 6px 10px 0;
					margin: 0 16px 10px 0;
					background-color: #fafafa;
					border-radius: 2px;
					.name {
						font-size: 13px;
						color: #262626;
					}
				}
			}
		}
		.customer-corp-panel {
			padding: 24px;
			border-top: 12px solid #f4f5f7;
			background-color: #fff;
			.corp-name-wrap {
				display: flex;
				justify-content: space-between;
				.clickable {
					display: inline-block;
					font-size: 13px;
					color: #1890ff;
					cursor: pointer;
				}
				.corp-name {
					display: flex;
					align-items: center;
					height: 22px;
					font-size: 16px;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.85);
					line-height: 22px;
					.build-icon {
						font-size: 18px;
						margin-right: 5px;
					}
				}
			}
		}
		.customer-detail-content {
			margin-top: 12px;
			background-color: #fff;
			// :deep(.el-input__wrapper) {
			// 	box-shadow: 0px 0px;
			// 	border-radius: 0;
			// }
			// :deep(.el-input:hover) {
			// 	border-bottom: 1px solid;
			// }
		}
	}
	.draw-header {
		// position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 22px 16px 22px 32px;
		background-color: #fff;
		box-shadow: 0 1px 4px 0 rgb(0 0 0 / 6%);
		.title {
			height: 24px;
			line-height: 24px;
			color: #262626;
			font-weight: 700;
			font-size: 16px;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.icon-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 52px;
			height: 20px;

			.icon-item {
				cursor: pointer;
				color: #000000a6;
			}
			.icon-item:hover {
				color: #8c8c8c;
			}
		}
	}
}
</style>
